<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { verifyList, detail, verify, shipping } from "@/api/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const ruleForm = reactive({
	pageNum: 1,
	pageSize: 10,
	condition: '',
	tableData: [],
	detailsObj: '',
	status: 1,
	reason: '',
	total: 0,
	drawer: false
})

const ruleFormRef = ref<FormInstance>()
const rulestatusFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
	status: [
		{ required: true, message: '请选择审核状态', trigger: 'blur' }
	],
	reason: [{ required: true, message: '请输入拒绝理由', trigger: 'blur' }]
})
const init = () => {
	verifyList({
		"pageNum": ruleForm.pageNum,
		"pageSize": ruleForm.pageSize,
		"condition": ruleForm.condition
	}).then((res) => {
		ruleForm.tableData = res.data.records
		ruleForm.total = res.data.total
		ruleForm.detailsObj = ''
	})
}
init()
const submitForm = async (formEl: { validate: (arg0: (valid: any, fields: any) => void) => any; }) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			init()
		} else {
			console.log('error submit!', fields)
		}
	})
}
const submitFormStatus = async (formEl: { validate: (arg0: (valid: any, fields: any) => void) => any; }) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			verify({
				verify: ruleForm.status,
				id: ruleForm.detailsObj.id,
				reason: ruleForm.status === 1 ? '' : ruleForm.reason
			}).then((res) => {
				init()
			})
		} else {
			console.log('error submit!', fields)
		}
	})
}
const resetForm = (formEl: { resetFields: () => void; }) => {
	if (!formEl) return
	formEl.resetFields()
	init()
}

const currentChange = (row: number) => {
	ruleForm.pageNum = row
	init()
}
const handleClick = (row: { fileUrl: string | URL | undefined; }) => {
	if (row.fileUrl) {
		window.open(row.fileUrl, '_blank')
	}
}

const cancelClick = () => {
	ruleForm.drawer = false
}

const confirmClick = () => {
	shipping({
		id: ruleForm.detailsObj.id,
		shippingCompany: ruleForm.detailsObj.shippingCompany,
		shippingNo: ruleForm.detailsObj.shippingNo
	}).then(() => {
		ruleForm.drawer = false
		init()
	})
}

//物流维护
const editDetails = (row: { id: any; }) => {
	if (!row) return
	detail({
		id: row.id
	}).then((res) => {
		ruleForm.detailsObj = res.data
		ruleForm.detailsObj.disabled = false
		ruleForm.drawer = true
	})
}

//详情
const Details = (row: { id: any; })=>{
	if (!row) return
	detail({
		id: row.id
	}).then((res) => {
		ruleForm.detailsObj = res.data
		ruleForm.detailsObj.disabled = true
		ruleForm.drawer = true
	})
}
</script>

<template>
	<div class="dashboard-container">
		<el-card shadow="never">
			<div class="l-con">
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
					status-icon>
					<el-row>
						<el-col :span="24" style="display: flex;align-items: center;">
							<el-form-item :label="$t('audit.fuzzySearch')" prop="condition">
								<el-input :placeholder="$t('audit.searchName')" v-model="ruleForm.condition" />
							</el-form-item>
							<el-form-item>
								<div style="display: flex;align-items: center;">
									<el-button type="primary" @click="submitForm(ruleFormRef)">
										{{$t('audit.Search')}}
									</el-button>
									<el-button @click="resetForm(ruleFormRef)">{{$t('audit.clear')}}</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>

				</el-form>
				<el-table highlight-current-row :data="ruleForm.tableData" border style="width: 100%" >
					<el-table-column type="index" :label="$t('audit.Number')" align="center" />
					<el-table-column prop="patient" :label="$t('audit.ResidentName')" align="center" />
					<el-table-column prop="doctor" :label="$t('audit.DoctorName')" align="center" />
					<el-table-column prop="department" :label="$t('audit.Department')" align="center" />
					<el-table-column prop="updatedAt" :label="$t('audit.Diagnosistime')" align="center" />
					<el-table-column prop="receiverPhone" :label="$t('audit.phone')" align="center" />
					<el-table-column :label="$t('audit.PrescriptionStatus')" align="center">
						<template #default="scope">
							<el-tag effect="dark" type="warning" v-if="scope.row.status === 0">{{$t('audit.ToBeConfirmed')}}</el-tag>
							<el-tag effect="dark" type="warning" v-if="scope.row.status === 1">{{$t('audit.Audit')}}</el-tag>
							<el-tag effect="dark" type="success" v-if="scope.row.status === 2">{{$t('audit.Audited')}}</el-tag>
							<el-tag effect="dark" type="danger" v-if="scope.row.status === 3">{{$t('audit.rejected')}}</el-tag>
							<el-tag effect="dark" type="danger" v-if="scope.row.status === 4">{{$t('audit.cancel')}}</el-tag>
							<el-tag effect="dark" type="success" v-if="scope.row.status === 5">{{$t('audit.NoMedicationTaken')}}</el-tag>
							<el-tag effect="dark" type="success" v-if="scope.row.status === 6">{{$t('audit.MedicationTaken')}}</el-tag>
							<el-tag effect="dark" type="success" v-if="scope.row.status === 7">{{$t('audit.IntheprocessoftakingMedicine')}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column :label="$t('audit.LogisticsTrackingNumber')" prop="shippingNo" align="center" width="200px">
					</el-table-column>
					<el-table-column :label="$t('audit.logisticsCompany')" prop="shippingCompany" align="center" width="200px">
					</el-table-column>
					<el-table-column fixed="right"  :label="$t('audit.operate')"  width="255px">
						<template #default="scope">
							<div style="display: flex;flex-wrap: wrap;">
								<el-tag effect="dark" style="margin:10px;"   @click="handleClick(scope.row)">
									<a href="javascript:;">{{$t('audit.PrevieworPrintPrescription')}}</a>
								</el-tag>
								<el-tag effect="dark" style="margin:10px;"  @click="Details(scope.row)">
									<a href="javascript:;">{{$t('audit.details')}}</a>
								</el-tag>
								<el-tag effect="dark"  style="margin:10px;" v-if="scope.row.takeWay === 2"   @click="editDetails(scope.row)">
									<a href="javascript:;">{{$t('audit.ModifyLogistics')}}</a>
								</el-tag>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div style=" margin-top: 10px;display: flex;align-items: center;justify-content: center;">
					<el-pagination @current-change="currentChange" :default-page-size="ruleForm.pageSize" background
						layout="prev, pager, next" :total="ruleForm.total" />
				</div>
			</div>
		</el-card>
		<el-drawer v-model="ruleForm.drawer" direction="rtl">
			<template #header>
				<h4>{{ruleForm.detailsObj.disabled?$t('audit.details'):$t('audit.ModifyLogistics')}}</h4>
			</template>
			<template #default>
				<div class="r-con">
					<div class="cardList">
						<div class="l-card">
							<div>{{$t('audit.Visitor')}}</div>
							<div class="msg">
								<el-avatar :size="50" :src="circleUrl" />
								<div class="info">
									<div>{{ ruleForm.detailsObj.patient }}</div>
									<div>{{ ruleForm.detailsObj.patientGender === 1 ? $t('audit.male') : $t('audit.female') }} {{
										ruleForm.detailsObj.patientAge }} {{$t('audit.age')}}
									</div>
								</div>
							</div>
						</div>
						<div class="r-card">
							<div>{{$t('audit.attendingDoctor')}}</div>
							<div class="msg">
								<el-avatar :size="50" :src="circleUrl" />
								<div class="info">
									<div>{{ ruleForm.detailsObj.doctor }}</div>
									<div>{{$t('audit.chiefPhysician')}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="orderCode">
						<el-form label-width="70px" label-position="top" class="demo-ruleForm" status-icon>
							<el-row>
								<el-col :span="24">
									<el-form-item :label="$t('audit.recipient')" prop="patient">
										<el-input disabled :placeholder="$t('audit.recipient')" v-model="ruleForm.detailsObj.patient" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item :label="$t('audit.phone')" prop="receiverPhone">
										<el-input disabled :placeholder="$t('audit.phone')" v-model="ruleForm.detailsObj.receiverPhone" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item :label="$t('audit.address')" prop="address">
										<el-input disabled :placeholder="$t('audit.address')" v-model="ruleForm.detailsObj.address" />
									</el-form-item>
								</el-col>
								<el-col :span="24" v-if="ruleForm.detailsObj.takeWay === 2">
									<el-form-item :label="$t('audit.LogisticsTrackingNumber')" prop="shippingNo">
										<el-input :disabled="ruleForm.detailsObj.disabled" :placeholder="$t('audit.LogisticsTrackingNumber')" v-model="ruleForm.detailsObj.shippingNo" />
									</el-form-item>
								</el-col>
								<el-col :span="24" v-if="ruleForm.detailsObj.takeWay === 2">
									<el-form-item :label="$t('audit.logisticsCompany')" prop="shippingCompany">
										<el-input :disabled="ruleForm.detailsObj.disabled"  :placeholder="$t('audit.logisticsCompany')" v-model="ruleForm.detailsObj.shippingCompany" />
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<el-table :data="ruleForm.detailsObj.drugs" style="width: 100%">
						<el-table-column type="index" :label="$t('audit.Number')" align="center" />
						<el-table-column prop="name" :label="$t('audit.DrugName')" align="center" />
						<el-table-column prop="dose" :label="$t('audit.dose')" align="center" />
						<el-table-column prop="norms" :label="$t('audit.specifications')" align="center" />
						<el-table-column prop="usages" :label="$t('audit.usage')" align="center" />
						<el-table-column prop="dosage" :label="$t('audit.Dosage')" align="center" />
						<el-table-column prop="frequency" :label="$t('audit.frequency')" align="center" />
					</el-table>
					<div class="status" v-if="ruleForm.detailsObj.status !== 1">
						{{$t('audit.AuditResults')}}：
						<el-tag effect="dark" type="warning" v-if="ruleForm.detailsObj.status === 0">{{$t('audit.ToBeConfirmed')}}</el-tag>
						<el-tag effect="dark" type="warning" v-if="ruleForm.detailsObj.status === 1">{{$t('audit.Audit')}}</el-tag>
						<el-tag effect="dark" type="success" v-if="ruleForm.detailsObj.status === 2">{{$t('audit.Audited')}}</el-tag>
						<el-tag effect="dark" type="danger" v-if="ruleForm.detailsObj.status === 3">{{$t('audit.rejected')}}</el-tag>
						<el-tag effect="dark" type="danger" v-if="ruleForm.detailsObj.status === 4">{{$t('audit.cancel')}}</el-tag>
						<el-tag effect="dark" type="success" v-if="ruleForm.detailsObj.status === 5">{{$t('audit.NoMedicationTaken')}}</el-tag>
						<el-tag effect="dark" type="success" v-if="ruleForm.detailsObj.status === 6">{{$t('audit.MedicationTaken')}}</el-tag>
						<el-tag effect="dark" type="success" v-if="ruleForm.detailsObj.status === 7">{{$t('audit.IntheprocessoftakingMedicine')}}</el-tag>
						<div style="margin-top: 20px;" v-if="ruleForm.detailsObj.status === 3">
							{{$t('audit.Reason')}}：{{ ruleForm.detailsObj.refuseReason }}</div>
					</div>
					<el-form v-if="ruleForm.detailsObj.status === 1" style="margin-top: 20px;" ref="rulestatusFormRef"
						:model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
						<el-row>
							<el-col :span="24">
								<el-form-item :label="$t('audit.AuditResults')" prop="status">
									<el-radio-group v-model="ruleForm.status" class="ml-4">
										<el-radio :label="1" size="large">{{$t('audit.pass')}}</el-radio>
										<el-radio :label="2" size="large">{{$t('audit.refuse')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="24" v-if="ruleForm.status === 2">
								<el-form-item :label="$t('audit.Reason')" prop="reason">
									<el-input type="textarea" v-model="ruleForm.reason" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item >
							<el-button type="primary" @click="submitFormStatus(rulestatusFormRef)">
								{{$t('audit.submit')}}
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</template>
			<template #footer>
				<div style="flex: auto">
					<el-button @click="cancelClick">{{$t('navbar.cancelButtonText')}}</el-button>
					<el-button v-if="ruleForm.detailsObj.takeWay === 2 && !ruleForm.detailsObj.disabled" type="primary" @click="confirmClick">{{$t('navbar.confirmButtonText')}}</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>
  

<style lang="scss" scoped>
.dashboard-container {
	width: 100%;

	:deep(.el-drawer) {
		width: 50% !important;
	}
	:deep(.el-drawer__body) {
		
		.r-con {
			border: 1px solid #E1E1E1;
			margin-left: 10px;

			.header {
				height: 50px;
				background: #F3F3F5;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 50px;
				padding-left: 20px;
			}

			.orderCode {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				box-shadow: 0 0px 5px 2px rgba(0, 0, 0, 0.1);
				margin: 10px;
			}

			.cardList {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;

				.l-card {
					flex: 1;
					box-shadow: 0 0px 5px 2px rgba(0, 0, 0, 0.1);
					padding: 10px;
				}

				.msg {
					display: flex;
					align-items: center;
					padding-top: 10px;

					.info {
						padding-left: 10px;
					}
				}

				.r-card {
					flex: 1;
					box-shadow: 0 0px 5px 2px rgba(0, 0, 0, 0.1);
					margin-left: 10px;
					padding: 10px;
				}
			}

			.status {
				background: #FFFFFF;
				box-shadow: 0px 1px 5px 0px rgba(38, 38, 38, 0.09);
				border-radius: 5px;
				margin-top: 20px;
				padding: 20px;
			}
		}
	}

	:deep(.el-card__body) {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.l-con {
			width: 100%;
		}


	}
}</style>